<template>
    <div class="tp-audio">
        <div class="tp-audio-box">
            <div class="tp-progres-box">
                <div class="tp-progres-mark" :style="{ left: (progres - .6) + '%' }"></div>
                <div class="tp-progres" :style="{ width: progres + '%' }"></div>
            </div>
            <div class="tp-progres-time">{{ currentTime + '/' + duration }}</div>
        </div>
        <slot v-if="slots.audioBtn" name="audioBtn"></slot>
        <div class="tp-audio-btn" @click="handleClick">
            <div class="icon-play" :class="[isPlay ? 'i-mdi:pause' : 'i-mdi:play']"></div>
        </div>
    </div>
</template>
<script setup lang="ts" name="TpAudio">
import { ref, shallowRef, onUnmounted, useSlots } from 'vue'
import { dayjs } from 'element-plus'
const slots = useSlots()
const emit = defineEmits(['on-change', 'end'])
const props = withDefaults(defineProps<{src: string}>(), {
    src:''
})
const audioRef = shallowRef()
const progres = ref<number>(0)
const isPlay = ref<boolean>(false)
const duration = ref('00')
const currentTime = ref('00')
const audioId = ref()
function createAudio() {
  audioRef.value = document.createElement('audio')
  audioId.value = 'tp-audio'+Date.now()
  audioRef.value.id = audioId.value
  audioRef.value.style.display = 'none'
  if(props.src) {
    audioRef.value.src = props.src
  }
  // audioRef.value.autoplay = true
  audioRef.value.preload = 'auto'
  audioRef.value.onloadeddata = (_e: any) => {
    currentTime.value = dayjs.unix(Math.floor(audioRef.value.currentTime)).format('mm:ss')
    duration.value = dayjs.unix(Math.floor(audioRef.value.duration)).format('mm:ss')
    emit('on-change', {currentTime:currentTime.value, duration: duration.value})
  }
  document.body.append(audioRef.value)
}
// 播放
function handleClick() {
  if (!isPlay.value) {
    audioRef.value.play()
    isPlay.value = true
    audioRef.value.ontimeupdate = (_e: any) => {
      currentTime.value = dayjs.unix(Math.floor(audioRef.value.currentTime)).format('mm:ss')
      progres.value = (audioRef.value.currentTime / audioRef.value.duration) * 100
      progres.value = Number(progres.value.toFixed(2))
      emit('on-change', {currentTime:currentTime.value, duration: duration.value, progres:progres.value})
    }
    audioRef.value.onended = (_e: any) => { // 播放完成
      isPlay.value = false
      emit('end')
    }
  } else {
    isPlay.value = false
    audioRef.value.pause()
  }
}
onUnmounted(() => {
    const tpAudio = document.body.querySelector('audio#'+audioId.value)
    if(tpAudio) tpAudio.remove()
})
createAudio()
</script>
<style scoped lang="scss">
.tp-audio-box {
  display: flex;
  justify-content: center;
  align-items: center;
  .tp-progres-time {
    font-size: 10px;
    color: #333333;
    margin-left: 5px;
  }
}
.tp-progres-box {
  width: 100%;
  height: 8px;
  background: rgb(221, 221, 221);
  border-radius: 10px;
  position: relative;

  .tp-progres-mark {
    position: absolute;
    top: -1px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #ffffff;
    &:hover {
      top: -3px;
      height: 12px;
      width: 12px;
    }
  }

  .tp-progres {
    position: absolute;
    top: 0;
    left: 0;
    height: inherit;
    background: #ffffff;
    border-radius: 10px 0 0 10px;
  }
}

.tp-audio-btn {
  margin: 5px auto 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;

  .icon-play {
    background: #333333;
    width: 22px;
    height: 22px;
  }
}
</style>